<template>
  <div class="trade-container">
      <el-table ref="multipleTable"
                :data="tableData.data"
                tooltip-effect="dark"
                stripe
                highlight-selection-row
                max-height="750"
                style="width: 100%">
        <el-table-column prop="content" label="内容"></el-table-column>
        <el-table-column prop="title" label="模块标题"></el-table-column>

        <el-table-column prop="operName" label="操作人员"></el-table-column>
        <el-table-column prop="requestUrl" label="请求路径"></el-table-column>
        <el-table-column prop="ip" label="请求IP"></el-table-column>
        <el-table-column prop="ipLocation" label="IP归属地"></el-table-column>
<!--        width="300"  show-overflow-tooltip-->
        <el-table-column prop="requestMethod" label="请求方法"></el-table-column>
        <el-table-column prop="status" label="操作状态">
          <template #default="scope">{{scope.row.status===0 ? '正常' : '异常'}}</template>
        </el-table-column>
        <el-table-column prop="errorMsg" label="错误消息" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="operTime" label="操作时间"></el-table-column>
        <el-table-column prop="takeTime" label="执行耗时"></el-table-column>

      </el-table>
    <el-pagination background layout="prev, pager, next" :page-size="15" :total="pageTotal" @current-change="currentChange"/>
  </div>
</template>

<script setup>
import { reactive,ref } from "vue";
import {_logList} from "../http/api.js";
import {ElLoading, ElMessage} from "element-plus";

const tableData = reactive({
  data:[]
})
const pageTotal = ref(); // 总数
let pageIndex = ref(1);
// 获取日志列表
const logList = (pageIndex) => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  _logList(pageIndex)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          let item = res.data.data;
          pageTotal.value = item.total;
          let records = res.data.data.records;
          tableData.data = records;
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage({ message: '网络异常', type: 'error'});

      })
}
logList(pageIndex.value);
// 分页点击
const currentChange = (pageIndex) => {
  logList(pageIndex);
}
</script>

<style lang="scss" scoped>
.trade-container{
  padding: 10px;
}
.icon-style{
  font-size: 24px;
  cursor: pointer;
}
.face-img-box{
  width: 50px;
  height: 65px;
}
</style>
